<template>
  <div style="width:100%;height:100%;">
    <el-form style="min-height:60px;width:98%;display:flex;align-items:flex-start;flex-wrap:wrap;" label-width="80px" label-suffix=":" :inline="false">
        <el-form-item style="min-height:40px;" label="输入1">
            <el-input style="min-width: 120px;" placeholder="请输入内容" v-model="elInput177.value">
            </el-input>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="输入2">
            <el-select style="min-width: 120px;" placeholder="请选择" v-model="elSelect179.value">
                <el-option v-model="elOption180.value" label="选项0">
                </el-option>
                <el-option v-model="elOption181.value" label="选项0">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="min-height:40px;" label="输入3">
            <el-date-picker style="min-width: 120px;" type="date" placeholder="选择日期" v-model="elDatePicker183.value">
            </el-date-picker>
        </el-form-item>
        <el-form-item style="min-height:40px;width: 280px;" label="输入4">
            <el-checkbox-group style="min-height:50px;width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;" v-model="elCheckboxGroup185.value">
                <el-checkbox>
                    多选框
                </el-checkbox>
                <el-checkbox>
                    多选框
                </el-checkbox>
                <el-checkbox>
                    多选框
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
    <div style="min-height:120px;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;">
        <div style="min-height:300px;width:100%;">
            <my-bar width="100%" height="100%" title="echarts柱图" :xaxis="myBar158.xaxis" :series="myBar158.series">
            </my-bar>
        </div>
        <div style="min-height:300px;width:100%;">
        </div>
        <div style="min-height:300px;width:100%;">
        </div>
        <div style="min-height:300px;width:100%;">
            <el-time-picker style="width:100%;" v-model="elTimePicker174.value" placeholder="选择时间">
            </el-time-picker>
        </div>
        <div style="min-height:300px;width:100%;">
            <div style="margin-top: 35px;margin-left: 15px;margin-bottom: 35px;width:300px;">
                <h3>支付方式</h3>
                <div style="width:100%;display:grid;grid-template-columns:1fr 10fr;justify-content:center;align-content:center;justify-items:center;">
                    <div style="width:100%;padding-top: 30px;">
                        <el-checkbox v-model="elCheckbox165.value">
                            微信
                        </el-checkbox>
                    </div>
                    <div style="width:100%;">
                        <el-image style="width:80px;height:80px;" fit="fill" src="/${workspaceFolder}/src/assets/wepay.jpg">
                        </el-image>
                    </div>
                    <div style="width:100%;padding-top: 30px;">
                        <el-checkbox v-model="elCheckbox169.value">
                            支付宝
                        </el-checkbox>
                    </div>
                    <div style="width:100%;">
                        <el-image style="width:80px;height:80px;" fit="fill" src="/${workspaceFolder}/src/assets/alipay.jpg">
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
        <div style="min-height:300px;width:100%;">
            <my-line width="100%" height="100%" title="多条线的图" :xaxis="myLine160.xaxis" :yaxis="myLine160.yaxis" :series="myLine160.series" :tooltip="myLine160.tooltip" :legend="myLine160.legend" :grid="myLine160.grid" :toolbox="myLine160.toolbox">
            </my-line>
        </div>
        <div style="min-height:300px;width:100%;">
            <el-color-picker v-model="elColorPicker173.value">
            </el-color-picker>
        </div>
        <div style="min-height:300px;width:100%;">
            <my-k width="100%" height="100%" title="k线图" :xaxis="myK159.xaxis" :yaxis="myK159.yaxis" :series="myK159.series">
            </my-k>
        </div>
        <div style="min-height:300px;width:100%;">
        </div>
    </div>
    <el-collapse style="min-height:60px;" v-model="elCollapse189.value">
        <el-collapse-item title="目录" name="1">
            <template slot="title">人力资源报表</template>
            <div style="width:100%;display:flex;align-items:flex-start;justify-content:flex-end;padding-bottom: 8px;">
                <el-button type="primary" size="small">
                    功能1
                </el-button>
                <el-button type="success" size="small">
                    功能2
                </el-button>
            </div>
            <el-table style="width:100%;" stripe border :data="elTable194.data">
                <el-table-column prop="select" label="选择" width="50" type="selection">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180" sortable="true">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="process" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini">操作</el-button>
                      </template>
                </el-table-column>
            </el-table>
            <div style="width:100%;display:flex;align-items:flex-start;justify-content:space-between;margin-top: 12px;">
                <div style="width:100%;">
                    <el-button type="primary" size="small">
                        功能3
                    </el-button>
                    <el-button type="success" size="small">
                        功能4
                    </el-button>
                </div>
                <el-pagination layout="prev, pager, next" :total="50">
                </el-pagination>
            </div>
        </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
const childrenProps = {};

export default {
    component : {
    },
    data(){
        return {
            //data定义,
            elInput177 : {"value":""},
    elOption180 : {"value":0},
    elOption181 : {"value":0},
    elSelect179 : {"value":0},
    elDatePicker183 : {"value":"2022-05-07T06:16:46.922Z"},
    elCheckboxGroup185 : {"value":[]},
    myBar158 : childrenProps.myBar158(),
    elTimePicker174 : {"value":new Date(1653796901000)},
    elCheckbox165 : {"value":false},
    elCheckbox169 : {"value":false},
    myLine160 : childrenProps.myLine160(),
    elColorPicker173 : {"value":"#409EFF"},
    myK159 : childrenProps.myK159(),
    elTable194 : childrenProps.elTable194(),
    elCollapse189 : {"value":["1",]},
        };
    },
}

childrenProps.myBar158 = function(){
    return {
        "xaxis":{
            "data":["白菜","菠菜","西葫芦","黄瓜","芹菜","西红柿",],
        },
        "series":[{
                "name":"销量",
                "type":"bar",
                "data":[{
                        "value":15,
                        "itemStyle":{
                            "color":"#cc00dd",
                        },
                    },{
                        "value":20,
                        "itemStyle":{
                            "color":"#a90000",
                        },
                    },{
                        "value":36,
                        "itemStyle":{
                            "color":"#609060",
                        },
                    },{
                        "value":10,
                        "itemStyle":{
                            "color":"#009966",
                        },
                    },{
                        "value":10,
                        "itemStyle":{
                            "color":"#00aa99",
                        },
                    },20,],
            },],
    }
};


childrenProps.myLine160 = function(){
    return {
        "xaxis":{
            "type":"category",
            "boundaryGap":false,
            "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun",],
        },
        "yaxis":{
            "type":"value",
        },
        "series":[{
                "name":"Email",
                "type":"line",
                "stack":"Total",
                "data":[120,132,101,134,90,230,210,],
            },{
                "name":"Union Ads",
                "type":"line",
                "stack":"Total",
                "data":[220,182,191,234,290,330,310,],
            },{
                "name":"Video Ads",
                "type":"line",
                "stack":"Total",
                "data":[150,232,201,154,190,330,410,],
            },{
                "name":"Direct",
                "type":"line",
                "stack":"Total",
                "data":[320,332,301,334,390,330,320,],
            },{
                "name":"Search Engine",
                "type":"line",
                "stack":"Total",
                "data":[820,932,901,934,1290,1330,1320,],
            },],
        "tooltip":{
            "trigger":"axis",
        },
        "legend":{
            "data":["Email","Union Ads","Video Ads","Direct","Search Engine",],
        },
        "grid":{
            "left":"3%",
            "right":"4%",
            "bottom":"3%",
            "containLabel":true,
        },
        "toolbox":{
            "feature":{
                "saveAsImage":{
                },
            },
        },
    }
};


childrenProps.myK159 = function(){
    return {
        "xaxis":{
            "data":["2017-10-24","2017-10-25","2017-10-26","2017-10-27","2017-10-28","2017-10-29","2017-10-30","2017-10-31",],
        },
        "yaxis":{
        },
        "series":[{
                "type":"candlestick",
                "data":[[20,34,10,38,],[40,35,30,50,],[31,38,33,44,],[38,15,5,42,],[20,34,10,38,],[40,35,30,50,],[31,38,33,44,],[38,15,5,42,],],
            },],
    }
};


childrenProps.elTable194 = function(){
    return {
        "data":[{
                "date":"2016-05-02",
                "name":"王小虎",
                "address":"上海市普陀区金沙江路 1518 弄",
            },{
                "date":"2017-05-04",
                "name":"王大虎",
                "address":"上海市普陀区金沙江路 1517 弄",
            },{
                "date":"2015-05-01",
                "name":"王中虎",
                "address":"上海市普陀区金沙江路 1519 弄",
            },{
                "date":"2018-05-03",
                "name":"王老虎",
                "address":"上海市普陀区金沙江路 1516 弄",
            },],
    }
};

</script>
<style type="css" scoped>
</style>